<template>
  <div class="single" :style="{ width: width, paddingTop: top }" >
    <div class="box" @click="dialogVisibleEdg = true">
      {{ glassData.length }}
    </div>
    <el-dialog
      title="玻璃明细"
      :visible.sync="dialogVisibleEdg"
      :header-cell-style="{ 'text-align': 'center' }"
      width="60%"
    >
      <glassTable :tableData="glassData" />
    </el-dialog>
  </div>
</template>

<script>
import glassTable from "@/views/components/production/glassTable.vue";
export default {
  components: {
    glassTable,
  },
  props: {
    top: {
      type: String,
      default: "50%",
    },
    Text: {
      type: Number,
      default: 0,
    },
    width: {
      type: String,
      default: "50%",
    },
    glassData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      dialogVisibleEdg: false,
    };
  },
};
</script>

<style scoped>
.single {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.box {
  position: absolute;
  top: 0%;
  width: 100%;
  left: 50%;
  transform: translate(-50%);
  width:60%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background-color: #fff;
  cursor: pointer;
  font-size: 24px;
  color: #0078d4;
  /* border: 2px solid #0078d4; */
}
</style>